<style lang="scss" scoped>
.operate-exam-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .exam-form {
        padding-right: 10px;
    }
    .exam-form ::v-deep {
        .el-date-editor.el-input {
            width: 100% !important;
        }
        .editor-custom-btn-container {
            display: none;
        }
        .tinymce-container {
            margin: 0 !important;
        }
    }
    .title {
        font-size: 18px;
    }
    .el-divider--horizontal {
        margin: 10px 0 20px 0 !important;
    }
    .operate-btn-container {
        border-top: 1px solid #ebeef5;
        padding: 20px;
        margin-bottom: 30px;
    }
    .row-bg {
        margin: 30px 0 30px 0;
    }
}
</style>
<template>
    <div class="operate-exam-container">
        <div style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/academicForums' }">
                    <span @click="reback()">{{ $t('国际学术论坛') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ variableList }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card
            style="padding: 0!important;"
            shadow="never"
            v-loading="loading"
            body-style="padding: 24px;"
        >
            <el-row type="flex" justify="space-between">
                <h2 style="color:#101010; font-weight: bold;">{{$t('国际学术论坛-查看')}}</h2>
                <el-button @click="reback">{{$t('requirement.back')}}</el-button>
            </el-row>
            <hr style="border-top: 2px solid #eee;" />
            <h2
                style="margin-left:20px;color:#101010;font-weight: bold;"
            >{{$t('interdisciplinaryManagement.personal')}}</h2>
            <el-form
                :model="queryForm"
                label-width="170px"
                label-position="top"
                :rules="rulesForm"
                ref="addform"
                label-suffix="："
            >
                <el-row>
                    <el-row :gutter="24">
                        <!-- 工号 -->
                        <el-col :span="6">
                            <el-form-item
                                :label="$t('interdisciplinaryManagement.jobNumber')"
                                prop="teacherId"
                            >
                                <el-select
                                    :disabled="compile=='查看'"
                                    v-model="queryForm.teacherId"
                                    filterable
                                    remote
                                    maxlength="32"
                                    reserve-keyword
                                    @change="changeClick"
                                    :remote-method="remoteMethodOne"
                                    style="width:100%"
                                >
                                    <el-option
                                        v-for="item in options.approver"
                                        :key="item.code"
                                        :label="item.code"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 姓名 -->
                        <el-col :span="6">
                            <el-form-item :label="$t('interdisciplinaryManagement.name')">
                                <el-input
                                    v-model="queryForm.teacherName"
                                    :disabled="compile=='查看'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 学院 -->
                        <el-col :span="6">
                            <el-form-item :label="$t('interdisciplinaryManagement.college')">
                                <el-input v-model="queryForm.faculty" :disabled="compile=='查看'"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 职称 -->
                        <el-col :span="6">
                            <el-form-item :label="$t('职称')">
                                <el-input v-model="queryForm.title" :disabled="compile=='查看'"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="12">
                        <!-- 手机 -->
                        <el-col :span="6">
                            <el-form-item
                                :label="$t('interdisciplinaryManagement.phoneNumber')"
                                prop="phoneNumber"
                            >
                                <el-input
                                    v-model.trim="queryForm.phoneNumber"
                                    maxlength="11"
                                    :disabled="compile=='查看'"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 电子邮箱 -->
                        <el-col :span="6">
                            <el-form-item :label="$t('电子邮箱')" prop="email">
                                <el-input
                                    v-model="queryForm.email"
                                    maxlength="320"
                                    :disabled="compile=='查看'"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
                <!-- 学生信息 -->
                <br />
                <el-row type="flex" class="row-bg" justify="space-between">
                    <h2 style="margin-left:20px;color:#101010;font-weight: bold;">{{$t('学生信息')}}</h2>
                </el-row>
                <el-form :model="academicAchieveTable" ref="academicAchieveTable">
                    <edu-table
                        :pagination="false"
                        :order="false"
                        :selection="false"
                        :tooltipEffect="tooltipEffect"
                        stripe
                        :data="academicAchieveTable.studentList"
                        size="mini"
                    >
                        <edu-table-column :label="$t('学号')" prop="studentId" maxlength="64"></edu-table-column>
                        <edu-table-column prop="studentName">
                            <template slot-scope="scope">
                                <div style="font-weight: bold;">{{ scope.row.studentName }}</div>
                                <div>{{ scope.row.studentFaculty }}</div>
                                <div>{{ scope.row.profession }}</div>
                            </template>
                        </edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.trainClasses')"
                            prop="trainingCategory"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.trainLevels')"
                            prop="trainingLevelName"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.degreeType')"
                            prop="degreeType"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.formsLearn')"
                            prop="formLearning"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.failGrade')"
                            prop="isFlunk"
                        ></edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.dissertation')"
                            prop="isSelected"
                        ></edu-table-column>
                        <edu-table-column :label="$t('手机号码')" prop="phoneNumber"></edu-table-column>
                        <edu-table-column :label="$t('邮箱')" prop="email"   maxlength="320"></edu-table-column>
                    </edu-table>
                </el-form>
                <!-- 国际学术论坛信息 -->
                <el-row type="flex" class="row-bg" justify="space-between">
                    <h2 style="margin-left:20px;color:#101010;font-weight: bold;">{{$t('国际学术论坛信息')}}</h2>
                </el-row>

                <el-row :gutter="24">
                    <!-- 项目编号 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('项目编号')" prop="projectNumber">
                            <el-input
                                :disabled="compile=='查看'"
                                v-model="queryForm.projectNumber"
                                width="100%"
                                maxlength="32"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 项目名称 -->
                    <el-col :span="16">
                        <el-form-item :label="$t('项目名称')" prop="projectName">
                            <el-input
                                v-model="queryForm.projectName"
                                width="100%"
                                :disabled="compile=='查看'"
                                maxlength="128"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <!-- 项目涉及一级学科 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('项目涉及一级学科')" prop="oneSubjectName">
                            <el-input
                                :disabled="compile=='查看'"
                                v-model="queryForm.oneSubjectName"
                                width="100%"
                                maxlength="32"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 论坛举办国家地区 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('论坛举办国家地区')" prop="country">
                            <el-input
                                :disabled="compile=='查看'"
                                v-model="queryForm.country"
                                maxlength="128"
                                width="100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 外方合作高校 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('外方合作高校')" prop="cooperativeUniversity">
                            <el-input
                                :disabled="compile=='查看'"
                                v-model="queryForm.cooperativeUniversity"
                                maxlength="128"
                                width="100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <!-- 论坛开始时间 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('论坛开始时间')" prop="forumStartTime">
                            <el-date-picker
                                :disabled="compile=='查看'"
                                style="width:100%"
                                v-model="queryForm.forumStartTime"
                                type="date"
                                :picker-options="pickerOptionsStart"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- 论坛结束时间 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('论坛结束时间')" prop="forumEndTime">
                            <el-date-picker
                                :disabled="compile=='查看'"
                                style="width:100%"
                                v-model="queryForm.forumEndTime"
                                type="date"
                                :picker-options="pickerOptionsEnd"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 经费信息 -->
                <el-row type="flex" class="row-bg" justify="space-between">
                    <h2 style="margin-left:20px;color:#101010;font-weight: bold;">{{$t('经费信息')}}</h2>
                </el-row>
                <el-row :gutter="24">
                    <!--  拟申请学校专项经费(万元) -->
                    <el-col :span="8">
                        <el-form-item :label="$t('拟申请学校专项经费(万元)')" prop="specialFunds">
                            <el-input
                                :disabled="compile=='查看'"
                                v-model.number="queryForm.specialFunds"
                                maxlength="32"
                                width="100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
import interManagementApi from 'common/src/api/externalExchange/interdiSciplinaryManagement'
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import forumProject from 'common/src/api/academicForums/forumProject'

export default {
    props: {
        compile: {
            type: String,
            default: ''
        },
        dataList: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        let validateNum = (rule, value, callback) => {
              let regExp = /^1[23456789]\d{9}$/
            if (!regExp.test(value)) {
                callback(new Error(this.$t('projectApplication.validateStudentPhone')))
            } else {
                callback()
            }
        }

        let validateNumEmail = (rule, value, callback) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('interdisciplinaryManagement.pleaseEnter')))
            }
            return callback()
        }
        let cannotEnter = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback(new Error(this.$t('internship.pleaseEnter')))
            }
            return callback()
        }
        return {
            pickerOptionsStart: {
                disabledDate: time => {
                    let endDateVal = this.queryForm.forumEndTime
                    if (endDateVal) {
                        // return time.getTime() > endDateVal;
                        return time.getTime() >= new Date(endDateVal).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    let beginDateVal = this.queryForm.forumStartTime
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                }
            },
            variableList: '',
            editModel: false,
            queryForm: {
                teacherId: null,
                teacherName: '',
                faculty: '',
                title: '',
                phoneNumber: '',
                email: '',
                studentList: [],
                forumStartTime: null,
                forumEndTime: null,
                student: '',
                oneSubjectName: '',
                country: '',
                projectName: '',
                cooperativeUniversity: '',
                specialFunds: '',
                positionName: ''
            },
            academicAchieveTable: {
                studentList: []
            },
            approver: [],
            options: {
                englisNameSchool: [],
                nameSchool: [],
                approver: [],
                studentList: []
            },
            rulesForm: {
                teacherId: [{ required: true, message: this.$t('请输入工号'), trigger: 'blur' }],
                forumStartTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur'
                    }
                ],
                forumEndTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur'
                    }
                ],
                studentId: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur'
                    }
                ],
                specialFunds: [{ required: true, validator: this.validateWeight, trigger: 'blur' }],
                projectName: [
                    { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
                ],
                country: [
                    { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
                ],
                oneSubjectName: [
                    { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
                ],
                projectNumber: [
                    { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
                ],
                studentId: [
                    { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
                ],
                cooperativeUniversity: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.studentPaperMust'),
                        trigger: 'change'
                    }
                ],
                phoneNumber: [{ required: true, validator: validateNum, trigger: 'change' }],
                email: [{ required: true, validator: validateNumEmail, trigger: 'change' }]
            }
        }
    },
    created() {
        this.compile == '新增'
            ? (this.variableList = this.$t('interdisciplinaryManagement.increased'))
            : this.compile == '编辑'
            ? (this.variableList = this.$t('interdisciplinaryManagement.edit'))
            : (this.variableList = this.$t('interdisciplinaryManagement.examine'))
        let obj = {
            condition: {
                nationId: ''
            },
            pageNum_: 1,
            pageSize_: 99999
        }
        this.postApproveAgree(obj)
    },
    mounted() {
        if (this.dataList) {
            let list = JSON.parse(JSON.stringify(this.dataList))
            this.queryForm = list
            this.academicAchieveTable.studentList = list.studentDetails
        }
    },
    methods: {
        cancelOperate() {
            this.$refs['addform'].resetFields()
        },
        validateWeight(rule, value, callback) {
            let expReg = /^([1-9][0-9]*)(\.\d{1,3})?$/
            if (!value) {
                callback(new Error(this.$t('internship.pleaseEnter')))
            } else if (!expReg.test(value)) {
                callback(new Error(this.$t('interdisciplinaryManagement.pleaseNumber')))
            } else {
                callback()
            }
        },
        // 列表查询
        postApproveAgree(date) {
            interAcaConferenceApi.overseasCollege(date).then(res => {
                if (res.data.list.length > 0) {
                    res.data.list.forEach(el => {
                        this.options.nameSchool.push({
                            value: el.id,
                            label: el.collegeName,
                            nationName: el.nationName
                        })
                        this.options.englisNameSchool.push({
                            value: el.id,
                            label: el.collegeNameEn,
                            nationName: el.nationName
                        })
                    })
                }
            })
        },
        // 返回
        reback() {
            this.$emit('change-exam')
        },
        // 查询教师工号
        changeClick(val) {
            if (val) {
                findTeacherInfoList({
                    condition: val,
                    pageSize_: 100,
                    pageNum_: 0
                }).then(res => {
                    if (res && res.code == 200) {
                        this.options.approver = res.data.list
                    }
                })
                this.options.approver.forEach(el => {
                    if (el.code == val) {
                        this.queryForm.teacherName = el.name
                        this.queryForm.faculty = el.facultyI18n
                        this.queryForm.title = el.title
                        this.queryForm.phoneNumber = el.telephone
                        this.queryForm.email = el.email
                    }
                })
            }
        },
        // 工号改变获取数据
        remoteMethodOne(query) {
            if (!!query) {
                setTimeout(() => {
                    findTeacherInfoList({
                        condition: query,
                        pageSize_: 100,
                        pageNum_: 0
                    }).then(res => {
                        if (res && res.code == 200) {
                            this.options.approver = res.data.list
                        }
                    })
                }, 200)
            } else {
                this.options.approver = []
            }
        }
    }
}
</script>
